import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import SbotMainWindow
import QtQuick.Controls.Basic

SbotMainWindow {
    id: mainWindow
    width: 840
    height: 580
    color: dark_theme
    visible: true
    title: "MySBOT"

    property string white_theme: "#fcfcfc"
    property string dark_theme: "#414141"

    //加深颜色
    function darkenColor(color, factor) {
        var newRed = color.r * factor
        var newGreen = color.g * factor
        var newBlue = color.b * factor

        return Qt.rgba(newRed, newGreen, newBlue, color.a)
    }

    //颜色切换动画
    PropertyAnimation {
        id: colorChanger
        duration: 500
        easing.type: Easing.InOutQuad
    }

    // 主题切换
    function switchTheme() {
        var newColor = (String(
                            mainWindow.color) === white_theme) ? dark_theme : white_theme

        colorChanger.target = mainWindow
        colorChanger.property = "color"
        colorChanger.to = newColor
        colorChanger.start()
    }

    Rectangle {
        id: contentLayout
        anchors.fill: parent

        //放大边框缺失
        function adjustWindowContentMarginsWhenMaximized(leftMargin, rightMargin, topMargin, bottomMargin) {
            anchors.leftMargin = leftMargin
            anchors.rightMargin = rightMargin
            anchors.topMargin = topMargin
            anchors.bottomMargin = bottomMargin
        }

        //主界面
        Rectangle {
            id: pluginWindow
            anchors.fill: parent

            Row {
                //插件列表
                Rectangle {
                    id: pluginList
                    objectName: "pluginList"
                    width: 60
                    height: pluginWindow.height
                    color: darkenColor(mainWindow.color, 0.8)

                    Component.onCompleted: {
                        mainWindow.onPluginListLoaded()
                    }

                    ColumnLayout {
                        anchors.fill: parent

                        Rectangle {
                            Layout.fillHeight: true
                            Layout.fillWidth: true
                            color: "transparent"

                            ListModel {
                                id: pluginLists
                                objectName: "pluginLists"

                                function addElement(element) {
                                    append(element)
                                }

                                // ListElement { name: "设置"; selected: false; iconsrc: "qrc:/Res/Icon/dark.png" }
                            }

                            ListView {
                                anchors.top: parent.top
                                anchors.bottom: parent.bottom
                                width: parent.width
                                anchors.topMargin: 5
                                anchors.bottomMargin: 5
                                spacing: 5
                                model: pluginLists

                                delegate: Rectangle {
                                    property bool isFocus: false

                                    width: 50
                                    height: 50
                                    color: (isFocus === true) ? darkenColor(
                                                                    mainWindow.color,
                                                                    0.7) : "transparent"
                                    radius: 5
                                    anchors.horizontalCenter: parent.horizontalCenter

                                    ToolTip {
                                        id: toolTip
                                        visible: false

                                        // Text {
                                        //     text: qsTr("串口设置")
                                        //     anchors.fill: parent
                                        // }
                                    }

                                    IconImage {
                                        width: (parent.isFocus === true) ? 35 : 32
                                        height: (parent.isFocus === true) ? 35 : 32
                                        anchors.horizontalCenter: parent.horizontalCenter
                                        anchors.verticalCenter: parent.verticalCenter
                                        source: model.iconsrc
                                        color: "gray"
                                    }

                                    MouseArea {
                                        anchors.fill: parent
                                        hoverEnabled: true

                                        onClicked: {
                                            mainWindow.swPluginView(
                                                        model.pluginId)
                                        }

                                        onEntered: {
                                            parent.isFocus = true
                                            toolTip.show(model.name, 2000)
                                        }

                                        onExited: {
                                            parent.isFocus = false
                                            toolTip.hide()
                                        }
                                    }
                                }
                            }
                        }

                        //设置
                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 50
                            color: "transparent"

                            IconImage {
                                id: settingIcon
                                width: 25
                                height: 25
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.verticalCenter: parent.verticalCenter
                                source: "qrc:/Res/Icon/Setting.png"
                                color: "gray"

                                RotationAnimation {
                                    id: settingIconRotationAnimation
                                    target: settingIcon
                                    property: "rotation"
                                    from: 0
                                    to: 360
                                    duration: 1000
                                    easing.type: Easing.InOutQuad
                                    loops: 1
                                }
                            }

                            MouseArea {
                                anchors.fill: parent
                                hoverEnabled: true

                                onEntered: {
                                    settingIconRotationAnimation.start()
                                }

                                onExited: {

                                }

                                onClicked: {

                                }
                            }
                        }
                    }
                }

                //插件界面
                Rectangle {
                    id: pluginDetail
                    objectName: "pluginDetail"
                    width: pluginWindow.width - pluginList.width
                    height: pluginWindow.height
                    color: darkenColor(mainWindow.color, 0.9)

                    Component.onCompleted: {
                        mainWindow.onPluginDetailLoaded()
                    }
                }
            }
        }

        /* Handle window drag operations. */
        MouseArea {
            id: titleBarMouseArea
            anchors.top: parent.top
            anchors.right: parent.right
            width: parent.width
            height: 30

            DragHandler {
                onActiveChanged: {
                    if (active) {
                        if (titleBarMouseArea.containsMouse) {
                            mainWindow.startSystemMove()
                        }
                    }
                }
            }
        }

        //标题栏
        Rectangle {
            id: titleBar
            anchors.top: parent.top
            anchors.right: parent.right

            Row {
                id: windowControls
                anchors.top: parent.top
                anchors.right: parent.right
                spacing: 10

                property int btnWidth: 32
                property int btnHeight: 32
                property string whiteColor: "white"
                property string darkColor: "black"
                property string hoverBackColor: "gray"

                Button {
                    property string backColor: "transparent"

                    id: switchThemeButton
                    width: windowControls.btnWidth
                    height: windowControls.btnHeight
                    icon.source: (String(
                                      mainWindow.color) === white_theme) ? "qrc:/Res/Icon/dark.png" : "qrc:/Res/Icon/white.png"
                    icon.color: (String(
                                     mainWindow.color) === white_theme) ? windowControls.darkColor : windowControls.whiteColor

                    background: Rectangle {
                        color: parent.backColor
                        radius: 5
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true

                        onEntered: {
                            parent.backColor = windowControls.hoverBackColor
                        }

                        onExited: {
                            parent.backColor = "transparent"
                        }

                        onClicked: {
                            switchTheme()
                        }
                    }
                }

                Button {
                    property string backColor: "transparent"

                    id: minimizationButton
                    width: windowControls.btnWidth
                    height: windowControls.btnHeight
                    icon.source: "qrc:/Res/Icon/window_minimization.png"
                    icon.color: (String(
                                     mainWindow.color) === white_theme) ? windowControls.darkColor : windowControls.whiteColor

                    background: Rectangle {
                        color: parent.backColor
                        radius: 5
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true

                        onEntered: {
                            parent.backColor = windowControls.hoverBackColor
                        }

                        onExited: {
                            parent.backColor = "transparent"
                        }

                        onClicked: {
                            mainWindow.showMinimized()
                        }
                    }
                }

                Button {
                    property string backColor: "transparent"

                    id: maxmizationButton
                    width: windowControls.btnWidth
                    height: windowControls.btnHeight
                    icon.source: "qrc:/Res/Icon/window_maximization.png"
                    icon.color: (String(
                                     mainWindow.color) === white_theme) ? windowControls.darkColor : windowControls.whiteColor

                    background: Rectangle {
                        color: parent.backColor
                        radius: 5
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true

                        onEntered: {
                            parent.backColor = windowControls.hoverBackColor
                        }

                        onExited: {
                            parent.backColor = "transparent"
                        }

                        onClicked: {
                            if (mainWindow.visibility === Window.Maximized) {
                                mainWindow.showNormal()
                            } else {
                                mainWindow.showMaximized()
                            }
                        }
                    }
                }

                Button {
                    property string backColor: "transparent"

                    id: closeButton
                    width: windowControls.btnWidth
                    height: windowControls.btnHeight
                    icon.source: "qrc:/Res/Icon/window_close.png"
                    icon.color: (String(
                                     mainWindow.color) === white_theme) ? windowControls.darkColor : windowControls.whiteColor

                    background: Rectangle {
                        color: parent.backColor
                        radius: 5
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true

                        onEntered: {
                            parent.backColor = windowControls.hoverBackColor
                        }

                        onExited: {
                            parent.backColor = "transparent"
                        }

                        onClicked: {
                            mainWindow.windowsExit()
                            mainWindow.close()
                        }
                    }
                }
            }
        }
    }
}
